<template>
  <div class="card" :class="{isChecked: isChecked == label}" @click="changeCard">
    <el-card shadow="never">
      <div class="triangle"></div>
      <div class="card-top">
        <div class="card-header">
          <!-- <slot name="radio"></slot> -->
          <p class="title">{{data.modelName}}</p>
          <el-tooltip effect="light" :disabled="isShowToolTip">
            <template #content>{{range}}</template>
            <div class="ellipsis" style="width: 100%">适用范围：<span @mouseover="isToolTip">{{range}}</span></div>
          </el-tooltip>
        </div>
        <el-divider></el-divider>
        <div class="card-middle">
          <el-row :gutter="10" align="middle" justify="center">
            <el-col :span="8" class="ellipsis">
              <User />
              <el-tooltip effect="light" :disabled="isShowToolTip">
                <template #content>{{data.createUserName}}</template>
                <span @mouseover="isToolTip">{{data.createUserName}}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="8" class="ellipsis">
              <svg-icon icon-class="tree" color="#666"></svg-icon>
              <el-tooltip effect="light" :disabled="isShowToolTip">
                <template #content>{{data.orgName}}</template>
                <span @mouseover="isToolTip">{{data.orgName}}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="8" class="ellipsis">
              <Calendar />
              <el-tooltip effect="light" :disabled="isShowToolTip">
                <template #content>{{updateTime}}</template>
                <span @mouseover="isToolTip">{{updateTime}}</span>
              </el-tooltip>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="card-bottom">
        <el-row align="middle" justify="center">
          <el-col :span="8" @click="viewModalDetail">查看详情</el-col>
          <el-col :span="8" @click="selectModalHandler">选择其他模型</el-col>
          <el-col :span="8" @click="addModal">新增模型</el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 查看详情-烈度衰减关系模型 -->
    <ViewModalDetail1 v-model:open="viewModalDetailOpen1" :id="data.id"></ViewModalDetail1>
    
    <!-- 选择其他模型 -->
    <SelectModal v-model:open="selectModalOpen" :type="type"></SelectModal>
    <!-- 新增模型 -->
    <Intensity v-model:openModel="insertModelOpen" />
  </div>
</template>
<script setup>
import ViewModalDetail1 from './viewModalDetail1.vue'
import Intensity from './intensity.vue'
import SelectModal from './selectModal.vue'
import { ref } from 'vue'
const props = defineProps({
  isChecked: String,
  label: [String, Number],
  type: String,
  data: {
    type: Object,
    default: () => {
      return {
        id: '',
        modelName: '',
        createUserName: '',
        orgName: '',
        updateTime: '',
        createTime: '',
        province: '',
        city: ''
      }
    }
  },
  isEdit: {
    type: Boolean,
    default: true
  }
})
const range = computed(() => {
  let province = props.data.province || ''
  let city = props.data.city || ''
  if (props.data.range) {
    return props.data.range
  }
  if (city == '全部' || city == '') {
    return province
  } else {
    return `${province}-${city}`
  }
})
const updateTime = computed(() => {
  let itemUpdateTime = props.data.updateTime && props.data.updateTime.split('T')[0]
  let itemCreateTime = props.data.createTime && props.data.createTime.split('T')[0]
  return itemUpdateTime || itemCreateTime
})
const emits = defineEmits(['update:isChecked'])
const insertModelOpen = ref(false)
const changeCard = () => {
  emits('update:isChecked', props.label)
}
let loading = ref(true)
watch(() => props.data, (newVal, oldVal) => {
  if(newVal.id){
    loading.value = newVal.id == undefined ? true : false
  }else if(newVal.type == 'default'){
    loading.value = false
  }
  // 写死数据immediate
},{immediate: true,deep: true})

// 查看详情
let viewModalDetailOpen1 = ref(false)
let viewModalDetailOpen2 = ref(false)
let viewModalDetailOpen3 = ref(false)
let viewModalDetailOpen4 = ref(false)
let viewModalDetailOpen5 = ref(false)
let viewModalDetailOpen6 = ref(false)
let viewModalDetailOpen7 = ref(false)
let viewModalDetailOpen8 = ref(false)
let viewModalDetailOpen9 = ref(false)
const viewModalDetail = () => {
  switch(props.type){
    case '1':
      viewModalDetailOpen1.value = true
      break;
    case '2':
      viewModalDetailOpen2.value = true
      break;
    case '3':
      viewModalDetailOpen3.value = true
      break;
    case '4':
      viewModalDetailOpen4.value = true
      break;
    case '5':
      viewModalDetailOpen5.value = true
      break;
    case '6':
      viewModalDetailOpen6.value = true
      break;
    case '7':
      viewModalDetailOpen7.value = true
      break;
    case '8':
      viewModalDetailOpen8.value = true
      break;
    case '9':
      viewModalDetailOpen9.value = true
      break;
  }
}
const selectModalOpen = ref(false)
// 选择其他模型
const selectModalHandler = () => {
  selectModalOpen.value = true
}
const router = useRouter()
// 新增模型
const addModal = () => {
  insertModelOpen.value = true
}
const isShowToolTip = ref(false)
const isToolTip = (e) => {
  const selfWidth = e.target.offsetWidth
  const parentWidth = e.target.parentNode.offsetWidth
  if (selfWidth > parentWidth) {
    isShowToolTip.value = false
  } else {
    isShowToolTip.value = true
  }
}
</script>
<style scoped lang="scss">
$checked: var(--el-color-primary);
$normal: #6f7eab;
$bottomChecked: #E6F2FD;
$bottomNormal: #F0F2F6;

.card {
  width: 350px;
  .triangle {
    border: 8px solid transparent;
    border-color: $normal transparent transparent $normal;
    position: absolute;
    top: 0;
    left: 0;
  }

  .el-card {
    border-color: $normal;
    border-radius: 0;

    :deep(.el-card__body) {
      padding: 0 !important;
    }

    .card-top {
      padding: 0 25px 15px 25px;
      color: #666;

      .card-header {
        text-align: left;
        font-size: 18px;

        .title {
          font-weight: bold;
          color: #333;
        }
      }
      .el-divider--horizontal{
        margin: 15px 0;
      }
      .card-middle {

        svg,
        span {
          vertical-align: middle;
        }

        svg {
          width: 1em;
          height: 1em;
          margin-right: 10px !important;
        }
      }
    }

    .card-bottom {
      height: 60px;
      background-color: $bottomNormal;
      color: #666;

      .el-row {
        height: 100%;

        .el-col {
          height: inherit;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid #fff;
        }
      }
    }
  }

  .ellipsis {
    display: inline-block;
    width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.card.isChecked {
  .triangle {
    border-color: $checked transparent transparent $checked;
  }

  .el-card {
    border-color: $checked;
  }

  .card-bottom {
    background-color: $bottomChecked;
    color: $checked;
  }
}
</style>